/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

/* 颜色变量 */

/* 行为相关颜色 */
// =================================用于配置常用的 CSS 变量

//主要颜色
$primary-color:#F7AC30;
//二级颜色
$secondary-color:#32CBBC;
//三级颜色
$tertiary-color:'#FFFFFF';

//主要文字颜色
$primary-text-color:#141414;
//二级文字颜色
$secondary-text-color:#666666;
//三级文字颜色
$tertiary-text-color:#454649;

//主要按钮颜色
$primary-button-color:$primary-color;
//二级按钮颜色
$secondary-button-color:$secondary-color;
//三级按钮颜色
$tertiary-button-color: $tertiary-color;

//不可点击时按钮颜色
$button-disabled-color:#999999;

//容器背景颜色
$background-color:#f5f5f5;
//placeholder颜色
$placeholder-color:#e5e5e5;
//border颜色
$border-color:#e5e5e5;

// UI 字体
$font-family: 'lucida grande', 'lucida sans unicode', lucida, helvetica,
'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;

// ================================= 临时

// 默认Flex布局
@mixin flex-box(){
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

// 默认定位布局
@mixin pos-box($position:absolute,$top:auto,$right:auto,$bottom:auto,$left:auto){
  position: $position;
  top: $top;
  bottom: $bottom;
  right: $right;
  left: $left;
}

//清除浮动
@mixin clear{
  clear: both;
  &:after{
    content: '';
    display: block;
    clear: both;
  }
}

//限制行数为n行
@mixin line-limit-n($-webkit-line-clamp : 1){
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: $-webkit-line-clamp;
  -webkit-box-orient: vertical;
}

// 默认按钮
@mixin button(
  $width:auto,
  $height:auto,
  $background: $primary-color,
  $border-color: $primary-color,
  $border-radius:0,
  $color:#FFFFFF,
  $font-size: 28rpx)
{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: $width;
  height: $height;
  border-radius: $border-radius;
  border: 1px solid $border-color;
  background: $background;
  color: $color;
  font-size: $font-size;
  &:active{ opacity: 0.8 }
}

// 提交按钮（主色）
@mixin btn-primary(){
  @include button(610rpx, 80rpx, linear-gradient(136deg,rgba(255,213,151,1) 0%,rgba(203,154,81,1) 100%), none, 46rpx, #fff, 32rpx);
}

// 提交按钮（次色）
@mixin btn-secondary(){
  @include button(610rpx, 80rpx,$tertiary-color,  rgba(30,30,32,.2),0.46rem,  #454649, 32rpx);
}

// 提交按钮（无效）
@mixin btn-disable(){
  @include button(610rpx, 98rpx, 50rpx, $button-disabled-color, $button-disabled-color, #fff, 32rpx)
}


// 尾部添加小icon
@mixin icon-box(){
  display: flex;
  align-items: center;
  &:after{
    content: '';
    display: block;
    width: 24rpx ;
    height: 24rpx;
    margin-left: auto;
    background-size: contain !important;
  }
}

// 尾部添加向右icon（背景图片应换相对应项目的图片地址）
@mixin icon-box-right() {
  @include icon-box;
  &:after{
    background: url('https://qiniu.mctower.runworld.com.cn/static-image/ic_repair_more.png') no-repeat center;
  }
}

// 尾部添加向右icon（背景图片应换相对应项目的图片地址）
@mixin icon-box-left() {
  @include icon-box;
  &:before{
    content: '';
    display: block;
    width: 24rpx ;
    height: 24rpx;
    margin-left: auto;
    background-size: contain !important;
    background: url('https://qiniu.mctower.runworld.com.cn/static-image/ic_repair_more.png') no-repeat center;
    transform: rotate(180deg);
    margin-right: auto;
  }
  &:after{
    display: none;
  }
}

// 尾部添加向上icon（背景图片应换相对应项目的图片地址）
@mixin icon-box-up() {
  @include icon-box;
  &:after{
    background: url('https://qiniu.mctower.runworld.com.cn/static-image/ic_my_home_tip.png') no-repeat center;
  }
}

// 尾部添加向下icon（背景图片应换相对应项目的图片地址）
@mixin icon-box-down() {
  @include icon-box;
  &:after{
    width: 20rpx ;
    height: 12rpx;
    background-size: 100% 100% !important;
    background: url('https://qiniu.mctower.runworld.com.cn/static-image/ic_mine_down.png') no-repeat center;
  }
}

// 选择状态的icon（背景图片应换相对应项目的图片地址）
@mixin icon-select(){
  display: inline-block;
  vertical-align: middle;
  min-width: 44rpx;
  max-width: 44rpx;
  width: 44rpx;
  height: 44rpx;
  border-radius: 100%;
  background-size: 100% 100% !important;
  margin-right: 20rpx;
  background: #ffffff url('https://qiniu.mctower.runworld.com.cn/static-image/ic_round_unselected.png');
  &.on{background: #ffffff url('http://image.sch.dankal.cn/ic_selected.png');}
}

// 占位图 （背景图片应换相对应项目的图片地址）
@mixin placeholder-img(){
  background: #f5f5f5;
  //background: url(~assets/images/tea/pic_home_logo_bg.png) no-repeat center;
  //background-size:40% auto;
  //object-fit: cover;
}

// ================================= 公用

.placeholder {
  font-size: 30rpx !important;
  font-weight:500 !important;
}

page {
  font-size: 28rpx !important;
  line-height: 1.4 !important;
  letter-spacing: 1rpx;
  color: $primary-text-color;
  font-family: $font-family;
}

page,cover-view,scroll-view,swiper,swiper-item,view,textarea,ul,li,p,img,input{
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  word-wrap: break-word;
  word-break: break-all;
  letter-spacing: inherit;
  line-height: inherit;
  font-size: inherit;
  color: inherit;
}

button{
  padding: 0;
  margin: 0;
  font-size: inherit;
  color: inherit;
  background: none;
  &:after{ display: none; }
}

/*浮动|清除浮动*/
.fl{float: left;}
.fr{float: right;}
.clear{@include clear}

/*字体颜色*/
.primary-color{color: $primary-color !important;}

/*文字行数*/
.line-limit{@include line-limit-n(1)}
.line-limit-2{@include line-limit-n(2)}

/*按钮样式*/
.btn-primary{ @include btn-primary }
.btn-secondary{ @include btn-secondary }
.btn-disable{ @include btn-disable }

/*输入框占位符颜色*/
.placeholder-color{color: $placeholder-color}

/*选择按钮*/
.icon-select {@include icon-select}
